<template>
  <Card :title="`每${title}产生的告警`" :body-style="{ padding: '12px' }">
    <template #extra>
      <Tooltip title="展开到全屏">
        <a-button :icon="h(ExpandOutlined)" size="small" @click="openModal(true)" />
      </Tooltip>
    </template>
    <div ref="chartRef" class="w-full h-48"></div>
  </Card>
  <BasicModal
    @register="registerModal"
    :show-cancel-btn="false"
    :show-ok-btn="false"
    :forceRender="true"
    :can-fullscreen="false"
    :title="`每${title}产生的告警`"
    wrap-class-name="full-modal"
  >
    <div ref="fullScreenChartRef" class="w-full h-[calc(100vh-140px)]"></div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, Ref, watch, h } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { echartsPublicOptions } from './echartsSetting';
  import { ExpandOutlined } from '@ant-design/icons-vue';
  import { Card, Tooltip } from 'ant-design-vue';
  import { BasicModal, useModal } from '/@/components/Modal';

  const props = defineProps({
    chartData: { type: Object, required: true },
    dateKey: { type: String, required: true },
  });
  const chartRef = ref<HTMLDivElement | null>(null);
  const fullScreenChartRef = ref<HTMLDivElement | null>(null);
  const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
  const { setOptions: setFullScreen } = useECharts(fullScreenChartRef as Ref<HTMLDivElement>);
  const [registerModal, { openModal }] = useModal();
  const title = ref('小时');
  watch(
    () => props.dateKey,
    (nVal) => {
      getInstance()?.showLoading();
      switch (nVal) {
        case 'day':
          title.value = '小时';
          break;
        case 'month':
          title.value = '天';
          break;
        case 'year':
          title.value = '月';
          break;
      }
    },
    {
      immediate: true,
      deep: true,
    },
  );
  watch(
    () => props.chartData,
    (nVal) => {
      let createdAlarmsList: any[] = [];
      nVal &&
        nVal.createdAlarmsCountHourly.forEach((item: object) => {
          createdAlarmsList.push(Object.values(item));
        });
      let options = {
        ...echartsPublicOptions(props.dateKey, createdAlarmsList.length == 0),
        legend: {
          type: 'scroll',
          left: 10,
          data: createdAlarmsList.length == 0 ? [] : ['创建告警数'],
        },
        series: [
          {
            name: '创建告警数',
            data: createdAlarmsList,
            type: 'bar',
            stack: 'x',
            itemStyle: {
              color: '#FF6337',
            },
          },
        ],
      };
      setOptions(options);
      getInstance()?.hideLoading();
      setFullScreen(options);
    },
    {
      immediate: false,
    },
  );
</script>
